<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>An Iframe Centric Modal Technology</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
<style type="text/css">
	body {
		margin: 0;
		padding: 0;
		background: #75101c url(i/assets/bg.png) top left repeat-x;
		}
		
	.myClass {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		}
		
	#mainDiv {
		padding: 209px 0 0 0;
		width: 494px;
		margin: 0 auto;
		background: url(i/assets/heading.png) top no-repeat;
		}
		
	.link-container {
		margin: 0 auto;
		width: 240px;
		}
		
	a {
		text-indent: -999em;
		overflow: hidden;
		float: left;
		width: 100px;
		height: 174px;
		outline: none;
		margin: 0 10px;
		background: url(i/assets/switch.png) left no-repeat;
		}
		
		a:hover {
			background-position: right;
			}
			
	.bonus {
		display: block;
		width: 465px;
		height: 60px;
		margin: 0 auto;
		background: url(i/assets/bonus.png) no-repeat;
		}
	
	iframe {
		z-index: 299;
		background: #fff url(i/assets/loader.gif) center no-repeat;
		}
</style>

<style type="text/css">
	/* -- Shadow Table -- */
#frameClose {
	width: 30px;
	height: 30px;
	z-index: 999;
	cursor: pointer;
	outline: none;
	background: url(popup/btn-close.png);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='popup/btn-close.png', sizingMethod='crop');
	}
	
#frameContainer img {
	z-index: 1;
	}
	
#s-topLeft {
	background: url(popup/shadow-left-top.png);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='popup/shadow-left-top.png', sizingMethod='crop');
	}
	
#s-topCenter {
	background: url(popup/shadow-top.png);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='popup/shadow-top.png', sizingMethod='scale');
	}
	
#s-topRight {
	background: url(popup/shadow-right-top.png);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='popup/shadow-right-top.png', sizingMethod='crop');
	}
	
#s-centerLeft {
	background: url(popup/shadow-left.png);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='popup/shadow-left.png', sizingMethod='scale');
	}
	
#s-centerRight {
	background: url(popup/shadow-right.png);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='popup/shadow-right.png', sizingMethod='scale');
	}
	
#s-bottomLeft {
	background: url(popup/shadow-left-bottom.png);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='popup/shadow-left-bottom.png', sizingMethod='crop');
	}
	
#s-bottomCenter {
	background: url(popup/shadow-bottom.png);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='popup/shadow-bottom.png', sizingMethod='scale');
	}
	
#s-bottomRight {
	background: url(popup/shadow-right-bottom.png);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='popup/shadow-right-bottom.png', sizingMethod='crop');
	}
	
*html #frameClose, *html #s-topLeft, *html #s-topRight, *html #s-topCenter, *html #s-centerLeft, *html #s-centerRight, *html #s-bottomLeft, *html #s-bottomCenter, *html #s-bottomRight {
	background-image: none;
	cursor: pointer;
	}

</style>

<script type="text/javascript" language="javascript">	
// JavaScript Browser Sniffer
// Eric Krok, Andy King, Michel Plungjan Jan. 31, 2002
// see http://www.webreference.com/ for more information
//
// This program is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation; either version 2 of the License, or
// (at your option) any later version.

var agt=navigator.userAgent.toLowerCase();
var appVer = navigator.appVersion.toLowerCase();
var is_minor = parseFloat(appVer);
var is_major = parseInt(is_minor);

var is_opera = (agt.indexOf("opera") != -1);

var is_mac = (agt.indexOf("mac")!=-1);
var iePos  = appVer.indexOf('msie');
if (iePos !=-1) {
   if(is_mac) {
	   var iePos = agt.indexOf('msie');
	   is_minor = parseFloat(agt.substring(iePos+5,agt.indexOf(';',iePos)));
   }
   else is_minor = parseFloat(appVer.substring(iePos+5,appVer.indexOf(';',iePos)));
   is_major = parseInt(is_minor);
}

var is_konq = false;
var kqPos   = agt.indexOf('konqueror');
if (kqPos !=-1) {                 
   is_konq  = true;
   is_minor = parseFloat(agt.substring(kqPos+10,agt.indexOf(';',kqPos)));
   is_major = parseInt(is_minor);
}                                 

var is_getElementById   = (document.getElementById) ? "true" : "false";
var is_getElementsByTagName = (document.getElementsByTagName) ? "true" : "false";
var is_documentElement = (document.documentElement) ? "true" : "false";

var is_safari = ((agt.indexOf('safari')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
var is_khtml  = (is_safari || is_konq);

var is_ie   = ((iePos!=-1) && (!is_opera) && (!is_khtml));
var is_ie4   = (is_ie && is_major == 4);
var is_ie5   = (is_ie && is_major == 5);
var is_ie5up = (is_ie && is_minor >= 5);
var is_ie5_5  = (is_ie && (agt.indexOf("msie 5.5") !=-1)); // 020128 new - abk
var is_ie6   = (is_ie && is_major == 6);

/* function to have multiple events within the onload event */
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
	if (!document.getElementsByClassName) {
		function getElementsByClassName(oElm, strTagName, strClassName){
			var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
			var arrReturnElements = new Array();
			strClassName = strClassName.replace(/\-/g, "\\-");
			var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
			var oElement;
			for(var i=0; i<arrElements.length; i++){
				oElement = arrElements[i];
				if(oRegExp.test(oElement.className)){
					arrReturnElements.push(oElement);
				}
			}
			return (arrReturnElements)
		}
		var who = getElementsByClassName(document, "a", "tarmac"), i;
	} else {
		var who = document.getElementsByClassName("tarmac"), i;
	}
	
	if (who != null) {
		for (i = 0; i < who.length; i++) {
		
			var attributeArray = who[i].getAttribute('rel');
			
			var currentLink = who[i].href;
			var lastCharacter = currentLink.charAt(currentLink.length - 1);
			if (lastCharacter != "#") {
				who[i].href = 'javascript: showDiv("' +  currentLink + '","' + attributeArray + '");';
			}
			if ((who[i].target == '_parent') || (who[i].target == '')) {} else {
				who[i].target = "_self";
			}
		}
	}
});
	
// Known bugs:

// 1.	If the width (and I assume height) are odd values, then the overlays will overlap by 1px in IE6 / 7.
// 2.	Fixed positioning is not setup for IE browsers yet, as such, leave var isFixed = false; do not change this value.
// 3.	Close button behaviour issues in Safari
// 4.	Shadow z-Index issues in Safari
var ifrm;
var frameContainer;
var closeButton;
var positioning;
var shadowContainer;

var pageLocation = '';
var isVCenter;		//To set on a link use vcenter:true or vcenter:false. Default is false.
var isHCenter;		//To set on a link use hcenter:true or hcenter:false. Default is true
var isFixed;			// DO NOT CHANGE THIS FROM 'FALSE' UNTILL PATCH IS APPLIED
								//To set on a link use isfixed:true or isfixed:false. Default is as above. Do not modify untill patched.

var frameTop;			//To set on a link use top:value (no px eg 450 not 450px)
var frameLeft;		//To set on a link use left:value (no px eg 450 not 450px)
var frameWidth;		//To set on a link use w:value (no px eg 450 not 450px)
var frameHeight;		//To set on a link use h:value (no px eg 450 not 450px)

var halfWidth;
var halfHeight;

var frameScroll = "auto";
var frameID = "quoteFrame";

var spacerImage = "spacer.gif";

if (is_ie6) {
	positioning = "absolute";
} else {
	if (isFixed) {
		positioning = "fixed";
	} else {
		positioning = "absolute";
	}
}

function makeFrame(path,attributes) {
	frameContainer = document.createElement("div");
	frameContainer.setAttribute("id", "frameContainer");
	document.body.appendChild(frameContainer);
	
	//Set the attributes if they have been defined on a link by link basis
	setAttributes(attributes);
	
	//Generate the shadow around the iframe
	createShadow();

	pageLocation = path;
	
	ifrm = document.createElement("iframe");
	ifrm.setAttribute("src", pageLocation);
	ifrm.setAttribute("id", frameID);
	ifrm.setAttribute("frameborder", "1");
	ifrm.setAttribute("scrolling", frameScroll);
	ifrm.setAttribute("allowtransparency", "false");
	ifrm.style.borderWidth = "0";
	document.getElementById('frameContainer').appendChild(ifrm);
	
	closeButton = document.createElement("a");
	closeButton.setAttribute("href","javascript: hideDiv();");
	closeButton.setAttribute("id","frameClose");
	document.getElementById('frameContainer').appendChild(closeButton);
	
	setFrame();
}

function setFrame() {
	ifrm.style.position = positioning;
	closeButton.style.position = positioning;
	
	// Vertical centering
	if (isVCenter == true) {
		ifrm.style.top = "50%";
		ifrm.style.marginTop = "-" + frameHeight / 2 + "px";
		
		closeButton.style.top = "50%";
		closeButton.style.marginTop = "-" + (halfHeight + 16) + "px";
	} else {
		ifrm.style.top = frameTop + "px";
		ifrm.style.marginTop = "0px";
		
		closeButton.style.top = frameTop - 16 + "px";
		closeButton.style.marginTop = "0px";
	}
	// Horizontal Centering
	if (isHCenter == true) {
		ifrm.style.left = "50%";
		ifrm.style.marginLeft = "-" + frameWidth / 2 + "px";
		
		closeButton.style.left = "50%";
		closeButton.style.marginLeft = "-" + (halfWidth + 16) + "px";
	} else {
		ifrm.style.left = frameLeft + "px";
		ifrm.style.marginLeft = "0px";
		
		closeButton.style.left = frameLeft - 16 + "px"
		closeButton.style.marginLeft = "0px";
	}
	ifrm.style.width = frameWidth + "px";
	ifrm.style.height = frameHeight + "px";
	ifrm.style.display = "block";
	frameContainer.style.display = "block";
}

function setAttributes(attributes) {
	// Default Values
	isVCenter = false;
	isHCenter = true;
	isFixed = false;
	
	frameTop = 70;
	frameLeft = 125;
	frameWidth = 850;	
	frameHeight = 550;
	
	// Unique Link Values
	var tmpArray = attributes.split(" "), i;
	var attributeArray = new Array();
	
	for (i = 0; i < tmpArray.length; i++) {
		attributeArray[i] = tmpArray[i].split(":");
	}

	for (i = 0; i < attributeArray.length; i++) {
		if (attributeArray[i][0] == 'vcenter') {
//			isVCenter = attributeArray[i][1];
			isVCenter = (attributeArray[i][1] == 'true') ? true : false;
		}
		if (attributeArray[i][0] == 'hcenter') {
//			isHCenter = attributeArray[i][1];
			isHCenter = (attributeArray[i][1] == 'true') ? true : false;
		}
		if (attributeArray[i][0] == 'isfixed') {
//			isFixed = attributeArray[i][1];
			isFixed = (attributeArray[i][1] == 'true') ? true : false;
		}
		if (attributeArray[i][0] == 'top') {
			frameTop = parseInt(attributeArray[i][1]);
		}
		if (attributeArray[i][0] == 'left') {
			frameLeft = parseInt(attributeArray[i][1]);
		}
		if (attributeArray[i][0] == 'w') {
			frameWidth = parseInt(attributeArray[i][1]);
		}
		if (attributeArray[i][0] == 'h') {
			frameHeight = parseInt(attributeArray[i][1]);
		}
	}
	
	halfWidth = (frameWidth / 2);
	halfHeight = (frameHeight / 2);
	
//	alert("isVCenter: " + isVCenter + "\r\nisHCenter: " + isHCenter + "\r\nisFixed: " + isFixed + "\r\nframeTop: " + frameTop + "\r\nframeLeft: " + frameLeft + "\r\nframeWidth: " + frameWidth + "\r\nframeHeight: " + frameHeight + "\r\nhalfWidth: " + halfWidth + "\r\nhalfHeight: " + halfHeight + "");
}

function showDiv(path,attributes) {
	pageLocation = path;
	
	if (document.getElementById('frameContainer') != null) {
//		if (document.getElementById('quoteFrame').src != pageLocation) {
			setAttributes(attributes);

			document.getElementById('quoteFrame').src = "about:blank";
			document.getElementById('quoteFrame').src = pageLocation;
//		}
		/* Re-implement this call when variable passing is setup */
		createShadow();
		setFrame();
		
		frameContainer.style.display = "block";
	} else {
		makeFrame(path,attributes);
	}
}

function hideDiv() {
	frameContainer.style.display = "none";
	ifrm.src = "about:blank";
}


/* -- Shadow Table Creation -- */
function createShadow() {
	
	var shadowContainer = document.createElement("div");
	shadowContainer.setAttribute("id", "shadowDiv");
	
	frameContainer.appendChild(shadowContainer);
	
	var i;
	
	for (i = 0; i < 8; i++) {
		var shadowImage = document.createElement("img");
		shadowImage.setAttribute("alt","");
		shadowImage.setAttribute("src",spacerImage);
		shadowImage.style.position = positioning;
	
		// Set ID
		if (i == 0) {
			shadowImage.setAttribute("id","s-topLeft");
		}
		if (i == 1) {
			shadowImage.setAttribute("id","s-topCenter");
		}
		if (i == 2) {
			shadowImage.setAttribute("id","s-topRight");
		}
		if (i == 3) {
			shadowImage.setAttribute("id","s-centerLeft");
		}
		if (i == 4) {
			shadowImage.setAttribute("id","s-centerRight");
		}
		if (i == 5) {
			shadowImage.setAttribute("id","s-bottomLeft");
		}
		if (i == 6) {
			shadowImage.setAttribute("id","s-bottomCenter");
		}
		if (i == 7) {
			shadowImage.setAttribute("id","s-bottomRight");
		}
	
		shadowContainer.appendChild(shadowImage);	
	}
	
	setShadow();
}

function setShadow() {
	var i;
	
	for (i = 0; i < 8; i++) {
	
		// Set ID
		if (i == 0) {
			shadowImage = document.getElementById("s-topLeft");
		}
		if (i == 1) {
			shadowImage = document.getElementById("s-topCenter");
		}
		if (i == 2) {
			shadowImage = document.getElementById("s-topRight");
		}
		if (i == 3) {
			shadowImage = document.getElementById("s-centerLeft");
		}
		if (i == 4) {
			shadowImage = document.getElementById("s-centerRight");
		}
		if (i == 5) {
			shadowImage = document.getElementById("s-bottomLeft");
		}
		if (i == 6) {
			shadowImage = document.getElementById("s-bottomCenter");
		}
		if (i == 7) {
			shadowImage = document.getElementById("s-bottomRight");
		}
		
		// Set Width
		if ((i == 1) || (i == 6)) {
			shadowImage.style.width = frameWidth - 25 + "px";
		} else {
			shadowImage.style.width = 30 + "px";
		}
		
		// Set Height
		if ((i == 3) || (i == 4)) {
			shadowImage.style.height = frameHeight - 28 + "px";
		} else {
			shadowImage.style.height = 30 + "px";
		}
		
		// Top Positioning
		if (isVCenter == true) {
			shadowImage.style.top = "50%";
			
			if ((i == 0) || (i == 1) || (i == 2)) {
				shadowImage.style.marginTop = "-" + (halfHeight + 12) + "px";
			}
			
			if ((i == 3) || (i == 4)) {
				shadowImage.style.marginTop = "-" + (halfHeight - 18) + "px";
			}
			
			if ((i == 5) || (i == 6) || (i == 7)) {
				shadowImage.style.marginTop = (halfHeight - 10) + "px";
			}
		} else {
			shadowImage.style.marginTop = "0px";
			
			if ((i == 0) || (i == 1) || (i == 2)) {
				shadowImage.style.top = (frameTop - 12) + "px";
			}
			
			if ((i == 3) || (i == 4)) {
				shadowImage.style.top = (frameTop + 18) + "px";
			}
			
			if ((i == 5) || (i == 6) || (i == 7)) {
				shadowImage.style.top = ((frameTop + frameHeight)  - 10) + "px";
			}
		}
		
		// Left
		if (isHCenter == true) {
			shadowImage.style.left = "50%";
			
			if ((i == 0) || (i == 3) || (i == 5)) {
				shadowImage.style.marginLeft = "-" + (halfWidth + 15) + "px";
			}
			
			if ((i == 1) || (i == 6)) {
				shadowImage.style.marginLeft = "-" + (halfWidth - 15) + "px";
			}
			
			if ((i == 2 ) || (i == 4) || (i == 7)) {
				shadowImage.style.marginLeft = (halfWidth - 10) + "px";
			}
		} else {
			
			if ((i == 0) || (i == 3) || (i == 5)) {
				shadowImage.style.left = (frameLeft - 15) + "px";
			}
			
			if ((i == 1) || (i == 6)) {
				shadowImage.style.left = (frameLeft + 15) + "px";
			}
			
			if ((i == 2 ) || (i == 4) || (i == 7)) {
				shadowImage.style.left = ((frameLeft + frameWidth) - 10) + "px";
			}
		}
	}
}

</script>

</head>
<body>
	<div id="mainDiv">
		<div class="link-container">
			<a href="http://code.google.com/p/tarmac/" class="tarmac myClass" rel="vcenter:false w:450 h:600">Test</a>
			<a href="http://www.google.com" class="tarmac" rel="vcenter:true w:850 h:400">Secondary Test</a>
		</div>
		
		<img src="i/spacer.gif" alt="Bonus" class="bonus" />
	</div>
</body>
</html>